<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr1 = ["A1", "A2", "B1", "B2", "C1", "C2", "D1", "D2"];
      const arr2 = ["A", "B", "C", "D"];
      function mergeArr(arr1, arr2) {
        let i = 0,
          j = 0;
        let arr = [];
        let str = "";
        str.charAt;
        while (i < arr1.length || j < arr2.length) {
          if(!arr1[i]){
            arr.push(arr2[j])
            j++
          }else if(!arr2[j]){
            arr.push(arr1[i])
            i++
          }else if (arr1[i].charAt(0) === arr2[j].charAt(0)) {
            arr.push(arr1[i]);
            i++;
          } else {
            arr.push(arr2[j]);
            j++;
          }
        }
        return arr;
      }
      console.log(mergeArr(arr1, arr2));
    </script>
  </body>
</html>
